import React from 'react';
import { Timeline, Space, Pagination } from "antd";
import TheImage from '@/components/TheImage'
import { goodsPutAwayRecordList } from '@/request/storeBackManage/goodsManage/goodsList'
import '../style/style.scss';


export default class ApplyRecord extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      storeGoodsId: props.storeGoodsId,
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      timelineData: [],
    }
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    console.log(this.state.pageData, 'sssssssss');
    await goodsPutAwayRecordList({ storeGoodsId: this.state.storeGoodsId, ...this.state.pageData }).then(res => {
      if (res.code === 0) {
        let data = []
        data = res.data.map(item => {
          let operatorType = '', images = []
          switch (item.operatorType) {
            case 0:
              operatorType = '平'
              break
            case 1:
              operatorType = '商'
              break
            default:
              operatorType = ''
          }
          images = item.images ? item.images.split(',') : []
          item.operatorType = operatorType //操作平台
          item.images = images //图片
          return item
        })
        this.setState({
          timelineData: data,
          pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
          total: res.totalCount
        })
      }
    })
  }
  // 分页切换
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { pageNo, pageSize },
    }, async () => {
      await this.getData()
      console.log(this.state.pageData, 'pageNo: pageNo, pageSize: pageSize');
    })
  }

  render() {
    const { timelineData, pageData, total } = this.state
    return (
      <div>
        <Timeline>
          {
            timelineData.map((item, index) => {
              return <Timeline.Item key={index} dot={<span className="icon-text">{item.operatorType}</span>}>
                <div className="timeline-content" key={index}>
                  <div className="timeline-content-title">
                    <div>{item.typeName}</div>
                    <div>{item.createTime}</div>
                  </div>
                  <div className="timeline-content-reason">{item.remark}</div>
                  <Space className="timeline-content-img">
                    {
                      item.images.map((v, i) => {
                        return <TheImage key={i} src={v} width={50} height={50} />
                      })
                    }
                  </Space>
                </div>
              </Timeline.Item>
            })
          }
        </Timeline>
        <Pagination style={{textAlign:'center',marginTop:20}} total={total} current={pageData.pageNo} pageSize={pageData.pageSize} showSizeChanger={false} onChange={this.pageChange} />
      </div>
    )
  }
}